<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogFormVisible"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="600px">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="80px">
      <el-form-item
        label="名称"
        prop="groupName">
        <el-input
          v-model="form.groupName"
          placeholder="规则组名称不超过128个字符"
          :clearable="true"/>
      </el-form-item>

      <el-form-item
        label="描述"
        prop="description">
        <el-input
          v-model="form.description"
          placeholder="描述内容不超过256个字符"
          type="textarea"
          :rows="5"/>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button
        @click="dialogFormVisible = false"
        size="small">取消</el-button>

      <el-button
        v-if="isAdd"
        type="primary"
        @click="create"
        :loading="dialogLoading"
        size="small">确定</el-button>
        <el-button
          v-if="!isAdd"
          type="primary"
          @click="update"
          :loading="dialogLoading"
          size="small">修改</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addRuleGroupItem,
  updateRuleGroupItem
} from '@/api/analysis/intelligent'
export default {
  data() {
    return {
      dialogLoading: false,
      isAdd: true,
      dialogTitle: '新增',
      dialogFormVisible: false,
      form: {
        id: '',
        groupId: '',
        groupName: '',
        description: '',
        parentId: '0'
      },
      rules: {
        groupName: [
          {
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          },
          {
            max: 128,
            message: '长度不能大于 128 个字符',
            trigger: 'blur'
          }
        ],
        description: [
          {
            max: 256,
            message: '长度不能大于 256 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    init(data, flag) {
      this.clearForm()
      if (data.type === 'add') { // 新增子集
        this.dialogTitle = '新增规则组'
        this.isAdd = true
        if (data.id) {
          this.form.parentId = data.groupId
        }
      } else if (data.type === 'update') { // 修改
        this.form = { ...data }
        this.dialogTitle = '修改规则组'
        this.isAdd = false
      }
      this.dialogLoading = false
      this.dialogFormVisible = flag
    },
    clearForm() {
      this.form.id = ''
      this.form.groupId = ''
      this.form.groupName = ''
      this.form.description = ''
      this.form.parentId = '0'
    },
    create() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.dialogLoading = true
          addRuleGroupItem({ ...this.form })
            .then(res => {
              this.dialogFormVisible = false
              this.$emit('handleGroupRefresh')
            })
            .catch(() => {
              this.dialogLoading = false
            })
        }
      })
    },
    update() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.dialogLoading = true
          updateRuleGroupItem({ ...this.form })
            .then(res => {
              this.dialogFormVisible = false
              this.$emit('handleGroupRefresh')
            })
            .catch(() => {
              this.dialogLoading = false
            })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
